import { Button, Empty, Flex, message, Pagination } from "antd"
import { Title } from "../components/Title"
import type { PresetColors } from "../types/base"
import { useSelector } from "react-redux"
import type { ROOTSTATE } from "../store"
import { useNavigate } from "react-router"
import { reqGetIssueByPage } from "../api/issue"
import { useEffect, useState } from "react"
import type { Issue as ISSUE } from "../types/issue"
import { IssueCard } from "../components/issueCard"

export const Issue = () => {
    const typeList = useSelector((state: ROOTSTATE) => state.typeStore.typeList)
    const isLogin = useSelector((state: ROOTSTATE) => state.userStore.isLogin)
    const [messageApi, contextHolder] = message.useMessage()
    const navigate = useNavigate()
    const gotoAddQ = () => {
        // if(登录了，可以去)
        if (isLogin){
            navigate("/editissue")
        }else{
            messageApi.error("请登录")
        }
    }
    const [issueList, setIssueList] = useState<ISSUE[]>([])

    const [type, setType] = useState("all")
    // 翻页相关数据
    const [currentPage, setCurrentPage] = useState(1)
    const [total,setTotal] = useState(0)
    const pageSize = 2
    // 获取当前页面展示Issue
    const getIssue = async () => {
        const res = await reqGetIssueByPage({
            page: currentPage,
            size: pageSize,
            type: type !== "all" ? type : undefined,
        })
        console.log(res);
        setIssueList(res.data.list)
        setTotal(res.data.total)
    }
    useEffect(() => {
        getIssue()
    },[currentPage, type])

    return (
        <>
            <Flex vertical gap={30}>
            <Title title="问答模块">
                <Flex gap={20}>
                    {[
                    {typename: "全部", _id: "all", color: "red" as PresetColors},
                    ...typeList,
                    ].map((item) => ( 
                    <Button 
                    size="small" 
                    color={item.color} 
                    variant="solid" 
                    key={item._id}
                    onClick={()=>{
                        setType(item._id)
                        setCurrentPage(1)
                    }}
                    >
                        {item.typename}
                        </Button>
                    ))}
                </Flex>
            </Title>
            <Flex gap={30} align="flex-start">
                <Flex flex={3} vertical gap={30}>
                    {issueList.length > 0 ? (
                        issueList.map((item)=>(
                            <IssueCard {...item} key={item._id}></IssueCard>
                        ))
                    ) : (
                        <Empty description="暂无相关提问"></Empty>
                    )}
                    {/* 翻页组件 */}
                    {issueList.length > 0 && (
                        <Pagination
                        current={currentPage}
                        pageSize={pageSize}
                        align="center"
                        defaultCurrent={1}
                        total={total}
                        onChange={(e)=>setCurrentPage(e)}
                        ></Pagination>
                    )}
                </Flex>
                <Flex flex={1} vertical>
                    <Button type="primary" block onClick={gotoAddQ}>
                        我要提问
                    </Button>
                </Flex>
            </Flex>
        </Flex>
        {contextHolder}
        </>
    )
}